<template>
  <div class="content">
    <a-space>
      <a-button type="primary" danger @click="() => router.push('/index')">文件导出</a-button>
      <a-button type="primary" danger @click="() => router.push('/preview')">文件预览</a-button>
    </a-space>
    <div class="con mt-2">
      <div class="flex-star">
        <a-space>
          <a-switch
            v-model:checked="data.language"
            checked-children="中文"
            un-checked-children="英文"
            @change="handLanuage"
          />
          <a-switch
            v-model:checked="data.theme"
            checked-children="浅色"
            un-checked-children="深色"
            @change="handleTheme"
          />
        </a-space>
      </div>
    </div>

    <div class="con mt-2">
      <h1>{{ $t('name') }}</h1>
      <h2>{{ $t('login.userName') }}</h2>
      <h1>{{ locale }}--{{ theme }}</h1>
      <a-table :dataSource="dataSource" :columns="columns" />

      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
        <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();

import { useI18n } from 'vue-i18n';
const i18n = useI18n({ useScope: 'global' });

import useCommonStore from '/@/store/modules/common';
import { storeToRefs } from 'pinia';
let pinia = useCommonStore();
let { locale, theme } = storeToRefs(pinia);

const data = reactive({
  language: (localStorage.getItem('language') == null ? 'zh_CN' : String(localStorage.getItem('language')) == 'zh_CN')
    ? true
    : false,
  theme: pinia.$state.theme == 'light' ? true : false,
});
const changeElementClass = (isDark: boolean) => {
  if (isDark) {
    document.documentElement.removeAttribute('class');
    document.documentElement.setAttribute('class', 'dark');
  } else {
    document.documentElement.removeAttribute('class');
    document.documentElement.setAttribute('class', 'light');
  }
};

const handLanuage = (e: any) => {
  data.language = e;
  pinia.changeLocal(e ? 'zh_CN' : 'en_US');
  i18n.locale.value = e ? 'zh_CN' : 'en_US';
  localStorage.setItem('language', e ? 'zh_CN' : 'en_US');
};
const handleTheme = (e: any) => {
  // if (e) {
  //   // document.documentElement.classList.add('light');
  //   // document.documentElement.classList.remove('dark');
  //   //如果主题颜色多用下面方法，主题颜色少用上面方法也行
  //   document.documentElement.removeAttribute('class');
  //   document.documentElement.setAttribute('class', 'light');
  // } else {
  //   // document.documentElement.classList.remove('light');
  //   // document.documentElement.classList.add('dark');
  //   document.documentElement.removeAttribute('class');
  //   document.documentElement.setAttribute('class', 'dark');
  // }

  changeElementClass(!e);
  pinia.changeTheme(e ? 'light' : 'dark');
  document.documentElement.setAttribute('style', `color-scheme: ${e ? 'light' : 'dark'}`);
};

// 多窗口监听 监听storage
window.addEventListener('storage', function (e) {
  // console.log('Key:', e.key);
  // console.log('Old Value:', e.oldValue);
  // console.log('New Value:', e.newValue);
  // console.log('URL:', e.url);
  // console.log('Storage area:', e.storageArea);

  if (e.key === 'common') {
    let storage = JSON.parse(e.newValue || '{}');
    console.info(storage);
    // 语言
    i18n.locale.value = storage.locale;
    if (storage.locale === 'zh_CN') {
      data.language = true;
    } else if (storage.locale === 'en_US') {
      data.language = false;
    }
    // 颜色主题
    document.documentElement.setAttribute('style', `color-scheme: ${storage.theme}`);
    if (storage.theme === 'dark') {
      data.theme = false;
      document.documentElement.removeAttribute('class');
      document.documentElement.setAttribute('class', 'dark');
    } else if (storage.theme === 'light') {
      data.theme = true;
      document.documentElement.removeAttribute('class');
      document.documentElement.setAttribute('class', 'light');
    }
  }
});

const activeKey = ref('1');
let dataSource = [
  {
    key: '1',
    name: '大伟1',
    age: 32,
    address: '北京市海淀区西二旗1号',
  },
  {
    key: '2',
    name: '大伟2',
    age: 32,
    address: '北京市海淀区西二旗1号',
  },
];

let columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
</script>

<style lang="less" scoped>
.content {
  width: 90vw;
  min-height: 90vh;
  margin: 3vh auto;
  padding: 20px;
  outline: 1px dashed #999;
  .con {
    padding: 10px;
    outline: 1px dashed #999;
    color: var(--text-color);
    // color: @font-color;
    // background-color: var(--bg-color);
  }
}
.asdfasdf {
  color: #18c4f8;
  color: #646cff;
}
</style>
